<template>
  <div class="file">
    <el-upload
      class="upload"
      action="#"
      :http-request="upload"
      :before-upload="beforeUploadFile"
      :on-success="handleSuccess"
      :show-file-list="false"
    >
      <template slot="trigger">
        <div>点击此处上传文件到OSS</div>
      </template>
    </el-upload>
    <div class="search-file">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="formInline"
      >
        <el-form-item label="文件名称" prop="name">
          <el-input
            v-model="formInline.name"
            placeholder="请输入文件名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件类型" prop="type">
          <el-input
            v-model="formInline.type"
            placeholder="请输入文件类型"
          ></el-input>
        </el-form-item>
        <el-form-item class="operate">
          <el-button type="primary" @click="onSubmit()">搜索</el-button>
          <el-button @click="resetForm('formInline')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content-file">
      <div class="item-file" v-for="item in fileList" :key="item.id">
        <dl @click="isOpenChange(item)">
          <dt>
            <img :src="item.url" alt="" />
          </dt>
          <dd>
            <p>{{ item.name }}</p>
            <p>上传于{{ item.create_time | time }}</p>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="currentChange"
      :page-size="pageSize"
    >
    </el-pagination>
    <Dialog
      v-if="isOpen"
      @close="colseDialog"
      @del="delFile"
      :fileData="fileData"
    />
  </div>
</template>
<script>
import { uploadImg } from "../../../utils/uploadAndDeleteOss";
import dayjs from "dayjs";

export default {
  data() {
    return {
      maxSize: 5 * 1024 * 1024, // 单张图片最大质量
      ossConfig: {
        region: "oss-cn-shanghai",
        ossBucket: "kong-zi-liu",
        osskeyId: "LTAI5tQEscGbfY54m3nXAqfj",
        osskeySecret: "Qm5JVOC7dgP05FobWcskxOZ8KN848J",
      }, // oss配置参数
      fileType: "",
      fileList: [],
      fileUrl: "",
      formInline: {
        name: "",
        type: "",
      },
      isOpen: false,
      fileData: {},
      pageIndex: 1,
      pageSize: 8,
      total: 0,
    };
  },
  computed: {},
  filters: {
    time(value) {
      return dayjs(value).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  created() {
    this.getFileList();
  },
  methods: {
    // 自定义上传图片
    async upload(file) {
      try {
        this.fileType = file.file.type;
        // 上传图片成功返回值
        let imgObj = await uploadImg(this.ossConfig, file.file);
        this.fileUrl = imgObj.url;
      } catch (err) {
        this.$message({
          type: "error",
          message: "上传失败,请稍后再试",
        });
        console.log(err);
      }
    },
    // 文件上传前钩子
    beforeUploadFile(file) {
      return new Promise((resolve, reject) => {
        if (file.size > this.maxSize) {
          this.$message({
            type: "error",
            message: "单张支付凭证不能大于5M",
          });
          return reject(false);
        } else {
          return resolve(true);
        }
      });
    },
    // 文件上传成功钩子
    handleSuccess(res, file, fileList) {
      this.$api
        .addFile({
          url: this.fileUrl,
          name: file.name,
          size: file.size,
          type: this.fileType,
        })
        .then((res) => {
          if (res.success) {
            this.getFileList();
          }
        });
    },
    // 获取文件列表
    getFileList() {
      this.$api
        .getFileList({
          pageSize: this.pageSize,
          pageIndex: this.pageIndex,
          ...this.formInline,
        })
        .then((res) => {
          if (res.success) {
            console.log(res.data);
            this.fileList = res.data.data;
            this.total = res.data.total;
          }
        });
    },
    onSubmit() {
      this.getFileList()
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 打开弹框
    isOpenChange(obj) {
      this.fileData = obj;
      this.isOpen = true;
    },
    // 关闭弹框
    colseDialog() {
      this.isOpen = false;
    },
    // 删除文件
    delFile(id) {
      this.$api.delFile({ id }).then((res) => {
        if (res.success) {
          this.isOpen = false;
          this.getFileList();
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });
    },
    // 分页页码改变
    currentChange(index) {
      this.pageIndex = index;
      this.getFileList();
    },
  },
  components: {
    Dialog: () => import("../components/Dialog.vue"),
  },
};
</script>
<style lang="scss" scoped>
.file {
  width: 100%;
  background-color: #eff2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .upload {
    width: 95%;
    height: 150px;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
  }
  .upload:hover {
    border-color: #409eff;
  }
  .search-file {
    width: 95%;
    height: 150px;
    background-color: #fff;
    margin-top: 20px;
    .el-form {
      display: flex;
      height: 150px;
      justify-content: space-around;
      align-items: center;
      .operate {
        width: 200px;
        height: 80%;
        display: flex;
        justify-content: end;
        align-items: flex-end;
      }
    }
  }
  .content-file {
    width: 95%;
    background-color: #fff;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .item-file {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 0;
      dl {
        width: 95%;
        height: 250px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        dt {
          width: 100%;
          height: 170px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 0 20px;
        }
      }
    }
  }
  .el-pagination {
    width: 100%;
    display: flex;
    justify-content: end;
  }
}
</style>